<!-- 目录管理 -->
<template>
  <div class="directorys-container">
    <el-card class="box-card">
      <el-row type="flex" justify="space-between">
        <!-- 表单 -->
        <el-form :model="form" :inline="true">
          <el-form-item label="目录名称">
            <el-input v-model="form.directoryName" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="onClear">清除</el-button>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button type="success" @click="onAdd" :icon="EditPen">新增目录</el-button>
      </el-row>
      <!-- 提示 -->
      <el-alert :title="`数据一共 ${page.total} 条`" type="info" :closable="false" show-icon  />
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%" class="tabel-color" :header-cell-style="{ background: '#fafafa'}" :cell-style="{height:'57px'}">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="subjectName" label="所属学科" width="180" />
        <el-table-column prop="directoryName" label="目录名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" />
        <el-table-column prop="totals" label="面试题数量" />
        <el-table-column prop="state" label="状态">
          <template v-slot="{row}">
            <span>{{row.state === 1 ? '已启用' : '已禁用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button link type="primary" size="small" @click="onOpen(row.id, row.state)">{{row.state === 0 ? '启用': '禁用'}}</el-button>
            <el-button link :type="row.state === 0 ? 'primary': 'info'" size="small" :disabled="row.state === 0 ? false : true" @click="onEdit(row.id)">修改</el-button>
            <el-button link :type="row.state === 0 ? 'primary': 'info'" size="small" :disabled="row.state === 0 ? false : true" @click="onDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px">
        <el-pagination
          small
          background
          :page-sizes="[5, 10, 20, 50]"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
          v-model:currentPage="page.page"
          v-model:page-size="page.pagesize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 新增目录弹框 -->
    <el-dialog
      v-model="showDireDialog"
      :title="title"
      width="21%"
      v-if="showDireDialog"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="ruleForm.subjectID" placeholder="请选择">
            <el-option v-for="(item,index) in subjectList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="ruleForm.directoryName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="end" class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { list as getDirectoryList, add, changeState, remove, detail, update } from '@/api/hmmm/directorys.js'
import { nextTick, onMounted, reactive, ref } from 'vue'
import moment from 'moment'
import { simple } from '@/api/hmmm/subjects'
import { ElMessage, ElMessageBox } from 'element-plus'
import { EditPen } from '@element-plus/icons-vue'
export default {
  name: 'directorys',
  setup () {
    const form = reactive({
      directoryName: undefined,
      state: undefined
    })
    const page = reactive({
      page: 1,
      pagesize: 10,
      total: 0
    })
    const list = ref([])
    // 获取表格数据
    async function getList () {
      const { data: { counts, items } } = await getDirectoryList({ ...form, ...page })
      page.total = counts
      items.forEach(t => {
        t.addDate = moment(t.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
      list.value = items
    }
    onMounted(() => {
      getList()
    })

    // 页码容量变化
    function handleSizeChange (val) {
      page.pagesize = val
      getList()
    }
    // 当前页码变化
    function handleCurrentChange (val) {
      page.page = val
      getList()
    }
    // 清除
    function onClear () {
      Object.assign(form, {
        directoryName: undefined,
        state: undefined
      })
      onSearch()
    }
    // 搜索
    function onSearch () {
      page.page = 1
      getList()
    }

    // 控制新增目录弹框
    const title = ref(undefined)
    const showDireDialog = ref(false)
    // 弹框表单
    const ruleForm = ref({
      subjectID: undefined,
      directoryName: undefined
    })
    // 学科下拉选择列表
    const subjectList = ref([])
    // 新增目录
    async function onAdd () {
      title.value = '新增目录'
      showDireDialog.value = true
      // const { data } = await simple()
      // subjectList.value = data
      getSubjectList()
    }
    async function getSubjectList () {
      const { data } = await simple()
      subjectList.value = data
    }
    // 关闭弹框
    function onClose () {
      showDireDialog.value = false
      Object.assign(ruleForm.value, {
        subjectID: undefined,
        directoryName: undefined
      })
    }
    const rules = reactive({
      subjectID: [
        { required: true, message: '请选择所属学科', trigger: 'change' }
      ],
      directoryName: [
        { required: true, message: '请输入目录名称', trigger: 'blur' }
      ]
    })
    const ruleFormRef = ref()
    // 启用/禁用
    async function onOpen (id, state) {
      state = state === 1 ? 0 : 1
      await changeState({ id, state })
      ElMessage.success('操作成功')
      getList()
    }
    // 修改
    async function onEdit (id) {
      title.value = '编辑目录'
      showDireDialog.value = true
      await nextTick()
      // ruleForm.value = row
      const { data } = await detail({ id })
      ruleForm.value = data
      getSubjectList()
    }
    // 删除
    function onDel (id) {
      ElMessageBox.confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id }).then(() => {
          ElMessage.success('删除成功！')
          getList()
        })
      }).catch(() => {

      })
    }
    // 提交弹框表单
    async function submitForm () {
      ruleFormRef.value.validate(async isOK => {
        if (!isOK) return
        if (ruleForm.value.id) {
          await update({ ...ruleForm.value })
        } else {
          await add({ ...ruleForm.value })
        }
        ElMessage.success('操作成功')
        onClose()
        getList()
      })
    }
    return {
      form,
      list,
      page,
      getList,
      handleSizeChange,
      handleCurrentChange,
      onClear,
      onSearch,
      showDireDialog,
      onClose,
      rules,
      submitForm,
      ruleForm,
      onAdd,
      subjectList,
      ruleFormRef,
      onOpen,
      onEdit,
      onDel,
      title,
      getSubjectList,
      EditPen
    }
  }
}
</script>

<style lang="scss" scoped>
.tabel-color {
  margin-top: 20px;
}
::v-deep(.el-overlay-dialog) {
  top: 120px;
}
::v-deep(.el-form-item__label){
  width: auto !important;
}
::v-deep(.el-tooltip__trigger) {
  width: 285px
}
</style>
